<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/index.css"/>
    <!--<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css"/>-->
    <script src="./js/jquery.js"></script>
    <script src="lib/layer/layer.js"></script>
    <!--<script src="lib/sweet-alert.min.js"></script>-->
    <!--<link rel="stylesheet" type="text/css" href="lib/sweet-alert.css">-->
    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <script src="js/base.js"></script>
    <script src="lib/vue/vue.min.js"></script>
    <script src="lib/vue/vue-resource.min.js"></script>
    <script src="./js/webuploader.html5only.min.js"></script>
    <link rel="stylesheet" href="./css/iconfont1.css"/>
    <style>
        #upload div{
            height: 100px !important;
        }
    </style>
</head>
<script type="text/javascript">
    (function () {
        var deviceWidth = document.documentElement.clientWidth;
        if (deviceWidth > 640) deviceWidth = 640;
        document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
    }());
</script>
<body>
<div class="perCenter" id="app">
    <div class="per_left">
        <p><span class="bottom_color">首页</span> > <span>个人中心</span></p>
        <div class="data">
            <div class="photo">
                <img :src="info.real_avatar" alt=""/>
                <p v-text="info.name"></p>
            </div>
            <ul class="name">
                <a href="./task_center.html"><li  ><i class="icon iconfont icon-zhengjianhao-copy"></i>任务中心</li></a>
                <a href="./myVirtual.html"><li class="person"><i class="icon iconfont icon-zhuji2"></i>我的虚拟机</li></a>
                <a href="./personalData.html"><li ><i class="icon iconfont icon-gerenziliao"></i>个人资料</li></a>
                <a href="./invitedShare.html"><li > <i class="icon iconfont">&#xe690;</i>邀请分享</li></a>
                <a href="./password.html"><li > <i class="icon iconfont icon-xiugaimima"></i>修改密码</li></a>
            </ul>
        </div>
    </div>
    <div class="task" style="margin-top: 50px;">
        <div class="virtual ing">
           <p class="perTitle"><i></i><span>正在使用虚拟机</span></p>
            <ul class="vir">
                <li v-for="li in lists">
                    <div class="Vtop">
                        <img :src="li.image.image.real_cover" alt=""/>
                        <p>{{li.name}}</p>
                    </div>
                    <div class="Vbottom">{{li.name}} 系统</div>
                </li>

            </ul>
        </div>
       <div class="virtual history" style="margin-top: 20px;">
           <p class="perTitle"><i></i><span>历史记录</span></p>
           <ul class="vir">
               <li v-for="de in deleted">
                   <div class="Vtop">
                       <img :src="de.image.image.real_cover" alt=""/>
                       <p>{{de.name}}</p>
                   </div>
                   <div class="Vbottom">{{de.name}} 系统</div>
               </li>
           </ul>
       </div>
    </div>
</div>
<div class="footer"></div>
</body>
<script>
    (function () {
        var app = new Vue({
            el: '#app',
            data: function () {
                return{
                    info: [],
                    deleted:[],
                    lists:[]
                }
            },
            mounted: function () {
                this.showData();
            },
            methods: {
                showData: function () {
                    var _this = this;
                    get(url + 'user/info', {}).then(
                            function (res) {
                                if (res.body.code == 101) {
                                    tip(res.body.msg);
                                    location.href = './login.html';
                                } else if (res.body.code == 400) {
                                    tip(res.body.msg);
                                } else {
                                    _this.info = res.body.data
                                }
                            }, function (reason) {
                                tip('请求错误')
                            });
                    get(url + 'compute/instance', {}).then(
                            function (res) {
                                if (res.body.code == 101) {
                                    tip(res.body.msg);
                                    location.href = './login.html'
                                } else if (res.body.code == 400) {
                                    tip(res.body.msg);
                                } else {
                                    _this.lists = res.data.data.using
                                    _this.deleted = res.data.data.deleted
                                }
                            }, function (reason) {
                                tip('请求错误')
                            });
                }
            }
        })
    })()
    $('.footer').load("./footer.html")
</script>
</html>